<template>
	<view class="box flex flex-column justify-start align-center">
		<view class="userinfo flex justify-between align-center p-3 mt-3 mb-5" @click="toUserInfo"
			style="border-radius: 15rpx; background-color: #f1e5fe;  height: 200rpx; width: 85%;">
			<view class="right flex justify-between align-center">

				<view class="avatar mr-3"
					style="width: 150rpx; height: 150rpx; border-radius: 50%; border: 2px solid #a855f7; overflow: hidden; background-color: #fff;">
					<image :src="user.avater" mode="aspectFill" style="height: 100%; width: 100%;"
					>
					</image>
				</view>
				<view class="text">
					<view class="nickname" style="font-size: 50rpx; font-weight: bold; color: #6b21a8;">
						{{user.nickname}}
					</view>
					<view class="introduction" style="color: #a855f7;">
						{{user.introduction ? user.introduction : '你好呀~'}}
					</view>
				</view>

			</view>
			<view class="more">
				<u-icon name="arrow-right" color="#a855f7" size="24"></u-icon>
			</view>
		</view>

		<view class="order p-3 my-3 flex justify-start align-center"
			style=" border-radius: 15rpx; background-color: #f8f1fe; height: 100rpx; width: 85%;" @click="toOrder">
			<img src="../../static/order.png" alt="" style="height: 50rpx; width: 50rpx; margin: 0 50rpx;" />
			<text style="color:#6b21a8">我的订单</text>
		</view>

		<view class="publish p-3 my-3 flex justify-start align-center"
			style=" border-radius: 15rpx; background-color: #f8f1fe; height: 100rpx; width: 85%;" @click="toPublish">
			<img src="../../static/publish.png" alt="" style="height: 50rpx; width: 50rpx; margin: 0 50rpx;" />
			<text style="color:#6b21a8">我的发布</text>
		</view>

		<view class="setting p-3 my-3 flex justify-start align-center"
			style=" border-radius: 15rpx; background-color: #f8f1fe; height: 100rpx; width: 85%;" @click="loginOut">
			<img src="../../static/setting.png" alt="" style="height: 50rpx; width: 50rpx; margin: 0 50rpx;" />
			<text style="color:#6b21a8">退出登录</text>
		</view>

		<!-- 指引 -->
		<u-overlay :show="newUser" mask-click-able="false">

			<view class="userinfo flex justify-between align-center p-3 mt-2 mb-4 ml-2" @click="toUserInfo"
				style="border-radius: 15rpx; background-color: #f1e5fe;  height: 210rpx; width: 85.6%;">
				<view class="right flex justify-between align-center">

					<view class="avatar mr-3"
						style="width: 150rpx; height: 150rpx; border-radius: 50%; border: 2px solid #a855f7; overflow: hidden; background-color: #fff;">
						<image :src="user.role == '学生' ? '../../static/student.png' : '../../static/teacher.png'" mode="aspectFill" style="height: 100%; width: 100%;"
						>
						</image>
					</view>
					<view class="text">
						<view class="nickname" style="font-size: 50rpx; font-weight: bold; color: #6b21a8;">
							{{user.nickname}}
						</view>
						<view class="introduction" style="color: #a855f7;">
							{{user.introduction ? user.introduction : '你好呀~'}}
						</view>
					</view>
				</view>
				<view class="more">
					<u-icon name="arrow-right" color="#a855f7" size="24"></u-icon>
				</view>
			</view>

			<view class="tip flex flex-column justify-center align-center"
				style=" height: 200rpx; width: 400rpx; background-color: #f1e5fe; position: absolute; top:30%; left: 25%; border-radius: 25rpx;">
				请先完善个人信息噢~
			</view>

		</u-overlay>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				value: "",
				user: {},
				newUser: true
			};
		},
		 onLoad() {
			this.init()
		},
		onShow() {
			this.init()
		},
		methods: {
			toUserInfo() {
				uni.navigateTo({
					url: "/pages/change_self/change_self"
				})
			},
			toPublish() {
				uni.showLoading({
					title:"加载中..."
				})
				db.collection('order').where({
					submit_user:this.user._id
				}).field('_id').get().then(res=>{
					
					uni.hideLoading()
					if(res.result.data.length==0)
					{
						uni.showToast({
							title:"你还没有发布订单噢~",
							icon:'none'
						})
					}
					else{
						uni.navigateTo({
					url: `/pages/orderDetail/orderDetail?order_id=${res.result.data[0]._id}&me=true`
				})
					}
					
				})
				
			},
			toOrder() {
				uni.navigateTo({
					url:'/pages/myOrderList/myOrderList'
				})
			},
			init() {
				uni.getStorage({
					key: "jiajiao_demo_account",
					success: res => {
						this.user = res.data
						
						if (this.user.sex == '?')
							this.newUser = true
						else
							this.newUser = false
					}
				})
			},
			loginOut()
			{
				uni.showModal({
					title: '确定退出登录吗？',
					
					success: function (res) {
					if (res.confirm) {
					uni.removeStorage({
						key:"jiajiao_demo_account"
					})
					uni.reLaunch({
						url:"/pages/index/index"
					})
					} else if (res.cancel) {
					
					}
					}
				})
			}

		}

	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 93vh;
		background-image: linear-gradient(to bottom, rgb(185, 135, 255), rgb(130, 88, 186));
	}
</style>